<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>snake</title>
    <style media="screen">
      table,tr,td{
        border:1px solid #000;
      }
      td{
        width: 18px;
        height: 18px;
      }
      .red{
        background-color: red;
      }
      .blue{
        background-color: blue;
      }
        #pp {
            width: 60px;
            height: 20px;
            font-size: 20px;
            font-weight: 600;
            text-align: center;
            line-height: 20px;
            border: 4px solid #000000;
            color: red;
        }
    </style>
  </head>
  <body>
  <p id="pp">0</p>
    <table id="table">

    </table>
  </body>
    <script type="text/javascript">
    // 绘制地图
    var table = document.getElementById("table");
    var pp = document.getElementById("pp");
    var maxTable = 20; //最大表格
    var n = 0;  // 计分数
    var tds = []; //把表格都存为二维数组 方便蛇身读取
    for(var i = 0; i < maxTable; i++){
        var tr = document.createElement("tr");
        // 声明一个空数组，用来存放里面的td
        var thisrowid = [];
        for(var j = 0; j < maxTable; j++){
            var td = document.createElement("td");
            tr.appendChild(td);
            // 把td追加到里面行的数组
            thisrowid.push(td);
        }
        // console.log(thisrowid);
        // 把行和列的数组追加到一个新的数组
        tds.push(thisrowid);
        table.appendChild(tr);
    }
    // console.log(tds);
      // tds[4][4].className = "red";
      // tds[4][5].className = "red";
      // tds[4][6].className = "red";
      // tds[4][7].className = "red";
      // tds[4][8].className = "red";
      function Snake(){
          this.bodyArr = [
            {x:5,y:8},
            {x:5,y:7},
            {x:5,y:6},
            {x:5,y:5}
          ];

          this.render();    // 画出一条蛇
          this.bingEvent();   // 绑定键盘事件
          this.direction = "down";  // 初始方向 向下
      }

      Snake.prototype.render = function(){
          // 每一秒清空所有的className 的名字
          for(var i = 0; i < maxTable; i++){
              for(var j = 0; j < maxTable; j++){
                  tds[i][j].className = "";
              }
          }
          // 渲染小蛇
          // 画出一条蛇
          for(var i = 0; i < this.bodyArr.length; i++){
              tds[this.bodyArr[i].x][this.bodyArr[i].y].className = "blue";
              // this.bodyArr[i].x
              // this.bodyArr[i].y
              // tds[][].className = "blue";
//              console.log(this.bodyArr[i].x,this.bodyArr[i].y);
          }
      }
      // 让蛇动起来
      Snake.prototype.move = function(){
          this.bodyArr.pop(); //删除尾巴
          // this.bodyArr.unshift({
          //   x : this.bodyArr[0].x + 1,
          //   y : this.bodyArr[0].y
          // })
          // 让蛇能改变方向
          switch (this.direction) {
            case "right":
                this.bodyArr.unshift({
                  x : this.bodyArr[0].x,
                  y : this.bodyArr[0].y + 1
                })

              break;
            case "up":
                this.bodyArr.unshift({
                  x : this.bodyArr[0].x -1,
                  y : this.bodyArr[0].y
                })

              break;
            case "down":
                this.bodyArr.unshift({
                  x : this.bodyArr[0].x +1,
                  y : this.bodyArr[0].y
                })

              break;
            case "left":
                this.bodyArr.unshift({
                  x : this.bodyArr[0].x,
                  y : this.bodyArr[0].y - 1
                })

              break;
            default:

          }
          // 蛇头 和食物的x坐标 y左边相等
          // 表示蛇吃到食物了此时就调用长大方法
          if (this.bodyArr[0].x == food.foodx && this.bodyArr[0].y == food.foody) {
              // 食物改变位置
              food.change();
              // 小蛇自己长大一个td
              this.growup();
              n += 10;
              pp.innerHTML = n;
          }
      }

      Snake.prototype.bingEvent = function(){
          var self = this;
          document.onkeydown = function(event){
              event = event || window.event;
              switch (event.keyCode) {
                case 37:
                    if (self.direction == "right") {
                        return;
                    }
                    self.direction = "left";
                  break;
                case 38:
                    if (self.direction == "down") {
                        return;
                    }
                    self.direction = "up";
                  break;
                case 39:
                    if (self.direction == "left") {
                        return;
                    }
                    self.direction = "right";
                  break;
                case 40:
                    if (self.direction == "up") {
                        return;
                    }
                    self.direction = "down";
                  break;
                default:

              }

          }
      }

      // 创建了食物
      function Food(foodx, foody){
          // 调用食物自己的改变方法
          this.change();
      }
      // 渲染食物
      Food.prototype.render = function(){
          tds[this.foodx][this.foody].className = "red";
      }

      // 蛇长大方法 就是在蛇头添加一个td，蛇尾不减少
      Snake.prototype.growup = function(){
        switch (this.direction) {
          case "right":
              this.bodyArr.unshift({
                x : this.bodyArr[0].x,
                y : this.bodyArr[0].y + 1
              })
            break;
          case "up":
              this.bodyArr.unshift({
                x : this.bodyArr[0].x -1,
                y : this.bodyArr[0].y
              })

            break;
          case "down":
              this.bodyArr.unshift({
                x : this.bodyArr[0].x +1,
                y : this.bodyArr[0].y
              })

            break;
          case "left":
              this.bodyArr.unshift({
                x : this.bodyArr[0].x,
                y : this.bodyArr[0].y - 1
              })

            break;
          default:

        }
      }

      Food.prototype.change = function(){
        // 随机绘制食物的位置
        this.foodx = parseInt(Math.random() * maxTable);
        this.foody = parseInt(Math.random() * maxTable);

        // 食物不能出现在自己的身上
        for (var i = 0; i < snake.bodyArr.length; i++) {
              if (this.foodx == snake.bodyArr[i].x && this.foody == snake.bodyArr[i].y)
                  this.change();
              // alert("食物出现在自己的身上了");
          }
        // }
      }
          //
          // 随机绘制一个食物
          // 蛇吃到食物会加长 然后 食物消失，
          // 又重新随机出现一个食物
          // 蛇不能掉头
          // 不能吃到自己
          // 不能碰到边界
          // 食物出现的位置不能在蛇身上
          // 分数
          var snake = new Snake();
          var food = new Food();
          var timer =  setInterval(function(){
              if (
                // 碰到右边框
                snake.bodyArr[0].y > maxTable - 1
                ||
                // 碰到底边框
                snake.bodyArr[0].x > maxTable - 1
                ||
                // 碰到左边框
                snake.bodyArr[0].x < 0
                ||
                // 碰到上边框
                snake.bodyArr[0].y < 0
              ) {
                  clearInterval(timer);
                  alert("game over");
                  alert("当前分数"+n+"分")
                  return;
              }else {
                snake.move();
                snake.render();
                food.render();
              }
          },100)
    </script>
</html>
